<template>
    <div>
        <!-- 表头 -->
        <div class="Head" v-if="Head">
            <!-- 仓库名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">订单号</span>
                <span>
                    <el-input v-model="adi.name" placeholder="请输入订单号"></el-input>
                </span>
            </div>
            <!-- 货架名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">送货方式</span>
                <span>
                    <el-select v-model="adi.method" placeholder="请选择操作类型">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"></el-option>
                    </el-select>
                </span>
            </div>
            <div class="Cusname">
                <span style="margin-right: 10px">送货仓库</span>
                <span>
                    <el-select v-model="adi.wId" placeholder="请选择仓库">
                        <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                    </el-select>
                </span>
            </div>
            <!-- 搜索，重置按钮 -->
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="serch">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="Reset()">重置</el-button>
            </div>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px">
            <el-button type="warning" icon="el-icon-download" plain>导出</el-button>
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle @click="Reset"></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="orderId" label="订单号"></el-table-column>
            <el-table-column prop="address" label="送货方式" :formatter="datas"></el-table-column>
            <el-table-column prop="arrive" label="预计到达时间"></el-table-column>
            <el-table-column prop="contacts" label="货主联系方式"></el-table-column>
            <el-table-column prop="phone" label="送货仓库" :formatter="datasa"></el-table-column>
            <el-table-column prop="plate" label="车船号牌"></el-table-column>
            <el-table-column prop="belongName" label="所属客户"></el-table-column>
            <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope">
                    {{ scope.row.status == 2 ? '审核未通过' : scope.row.status == 1 ? '审核通过' : '审核中' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="350px">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="jump(scope.row)">查看货品</el-button>
                    <el-button type="text" size="small" @click="toexamine(scope.row)">审核</el-button>
                    <el-button type="text" size="small" @click="Administrative(scope.row.id)">管理费用项</el-button>
                    <el-button type="text" size="small" @click="Deldeli(scope.row.id)">删除</el-button>
                    <el-button type="text" size="small" @click="print(scope.row)">打印条形码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加仓库弹框 -->
        <!-- <el-dialog title="添加仓库" :visible.sync="dialogVisibles" width="65%"> -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="adi2">
                <div style="width: 100%; margin-bottom: 10px">
                    <span>订单号</span>
                    <div style=" width: 60%"><el-input placeholder="请输入仓库名称" v-model="adi2.orderId"></el-input></div>
                </div>
                <div style=" width: 100%; margin-bottom: 10px">
                    <span>送货方式</span>
                    <div style=" width: 60%">
                        <el-select v-model="adi2.method" placeholder="请选择操作类型">
                            <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="width: 100%; margin-bottom: 10px">
                    <span>预计到达时间</span>
                    <div style="width: 60%"><el-input placeholder="请输入条码" v-model="adi2.arrive"></el-input></div>
                </div>
                <div style="width: 100%; margin-bottom: 10px">
                    <span>货主联系方式</span>
                    <div style="width: 60%"><el-input placeholder="请输入联系人" v-model="adi2.contacts"></el-input></div>
                </div>
                <div style="width: 100%; margin-bottom: 10px">
                    <span>送货仓库</span>
                    <div style=" width: 60%">
                        <el-select v-model="adi2.wId" placeholder="请选择仓库">
                            <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="width: 100%;">
                    <span>车船号牌</span>
                    <div style="width: 60%"><el-input placeholder="请输入类别" v-model="adi2.plate"></el-input></div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisibles" width="65%" :before-close="handleClose">
            <el-form ref="form" :model="adi">
                <el-descriptions class="margin-top" title="运单信息" :column="4" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            编号
                        </template>
                        {{ hh.orderId }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            送货仓库
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            货主联系人
                        </template>
                        {{ hh.contacts }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            车船牌号
                        </template>
                        {{ hh.plate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            预计到货时间
                        </template>
                        {{ hh.arrive }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions class="margin-top" style="margin-top: 10px" title="我方应付费用项" :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            托运费
                        </template>
                       {{ hh.cost[0].mnumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            停车费
                        </template>
                        {{ hh.cost[1].mnumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            地面服务费
                        </template>
                        {{ hh.cost[2].mnumber }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions class="margin-top" style="margin-top: 10px" title="货主应付费用项" :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            托运费
                        </template>
                        {{ hh.cost[0].mnumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            停车费
                        </template>
                        {{ hh.cost[1].mnumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i></i>
                            地面服务费
                        </template>
                        {{ hh.cost[2].mnumber }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
            <el-table :data="tableDatas" style="margin-top:20px">
                    <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
                <el-table-column prop="product.number" label="货品编号"></el-table-column>
                <el-table-column prop="product.name" label="货品名称"></el-table-column>
                <el-table-column prop="stock" label="订单数量"></el-table-column>
                <el-table-column prop="realStock" label="入库数量"></el-table-column>
                <el-table-column prop="product.spec" label="规格"></el-table-column>
                <el-table-column prop="product.code" label="条码"></el-table-column>
                <el-table-column prop="product.brand" label="品牌"></el-table-column>
                <el-table-column prop="product.shelvesName" label="货架"></el-table-column>
                <el-table-column label="操作" width="80px">
                    <template slot-scope="scope">
                         <el-button type="text" size="small"  @click="quantity(scope.row.infoId)">入库数量</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-bottom: 20px; margin-top: 5px">
                <el-pagination
                    background
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pages.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals"
                >
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adopt" type="primary">通过</el-button>
                <el-button type="danger" @click="refuse">拒绝</el-button>
            </div>
        </el-dialog>
           <!-- 入库数量 -->
        <el-dialog title="提示" :visible.sync="dialogVisibleu" width="35%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="sl">
                <div>请输入数量</div>
                <el-input v-model="sl.realStock" placeholder="请输入数量"></el-input>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleu = false">取 消</el-button>
                <el-button type="primary" @click="Submit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 管理费用项 -->
        <el-dialog
  title="管理费用项"
  :visible.sync="costman"
  width="45%"
  :before-close="handleClose">
   <el-table :data="gridData">
    <el-table-column property="name" label="项目名称"></el-table-column>
    <el-table-column property="mnumber" label="我方应付">
        <template slot-scope="scope">
<el-input v-model="scope.row.mnumber" ></el-input>
        </template>
    </el-table-column>
    <el-table-column property="hnumber" label="货主应付">
                <template slot-scope="scope">
<el-input v-model="scope.row.hnumber" ></el-input>
        </template>
    </el-table-column>
  </el-table>
  <div style="height:50px; display: flex;
    justify-content:flex-end;
    align-items:center;">
    <el-button @click="management">确 定</el-button>
    </div>
</el-dialog>
  <!-- 打印 -->
        <el-dialog title="打印预览" :visible.sync="Print" width="35%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="sl">
                <div id="printMe">
                     <svg id="barcode"></svg>
                 </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Print = false">取 消</el-button>
                <el-button v-print="'#printMe'" type="primary">打印</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listorder2, listWarehouse, order2up, order2del,order2examine,order2adopt,order2quantity,order2refuse,expenseitem,Modifyorder } from '../../api/user.js';
import JsBarcode from 'jsbarcode'
export default {
    data() {
        return {
            size: '',
            // 搜索输入框
            value: '',
            // 表头隐藏
            Head: true,
            // 添加框
            dialogVisible: false,
            dialogVisibles: false,
            dialogVisibleu:false,
            costman:false,
            Print:false,
            tableData: [],
            tableDatas:[],
            ck: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            pages: {
                pageSize: 10,
                pageNum: 1,
                oId:undefined,
                id:undefined
            },
            totals:null,
            total: null,
            // 添加输入框
            adi: {},
            adi2: {},
            sl:{
                realStock:null,
            },
            Fail:{},
            hh: {
                cost: [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ]
            },
            options: [
                {
                    method: '0',
                    label: '汽车'
                },
                {
                    method: '1',
                    label: '船运'
                },
                {
                    method: '3',
                    label: '火车'
                },
                {
                    method: '4',
                    label: '自提'
                },
                {
                    method: '5',
                    label: '专车'
                },
                {
                    method: '6',
                    label: '零坦'
                },
                {
                    method: '7',
                    label: '快递'
                }
            ],
            // 管理费用项
            gridData:[],
            grdData:[],
        };
    },
    methods: {
        
        // 重置按钮
        Reset() {
            this.Rean();
            this.adi.name = undefined;
            this.adi.address = undefined;
        },
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 表格渲染
        Rean() {
            listorder2(this.page).then((a) => {
                this.tableData = a.rows;
                this.total = a.total;
            });
        },
        rean() {
            listWarehouse(this.wId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
        Reans(){
            order2examine(this.pages).then((res)=>{
                this.tableDatas = res.rows;
                this.totals=res.total
                console.log(res);
            })
        },
        // 搜索
        serch() {
            listorder2(this.adi).then((res) => {
                console.log(res);
                this.tableData = res.rows;
            });
        },
        // 删除
        Deldeli(index) {
            console.log(index);
            this.id = index;
            order2del(this.id).then((res) => {
                console.log(res);
                this.Rean();
            });
        },
        //
        resect() {
            // 地址
            (this.adi.address = null),
                // 类别
                (this.adi.category = null),
                // 条码
                (this.adi.code = null),
                // 联系人
                (this.adi.contacts = null),
                // 名称
                (this.adi.name = null),
                // 手机号码
                (this.adi.phone = null);
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        dw() {
            this.dialogVisible = false;
        },
        //修改按钮
        update(k) {
            this.Dialogtitle = '修改仓库';
            this.adi2 = k;
            this.dialogVisible = true;
        },
        toexamine(k) {
            console.log(k);
            this.hh = k;
            this.pages.oId=k.id;
            this.Fail.id = k.id;
            this.dialogVisibles = true;
             if (this.hh.cost) {
                 this.hh.cost = eval(this.hh.cost);
            } else {
                this.hh.cost = [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ];
            }
                 this.Reans()
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            order2up(this.adi2).then((res) => {
                console.log(res);
                this.Rean();
                this.$message.success('修改成功');
            });
        },
        // 跳转
        jump(val) {
            this.$router.push({
                path: '/order',
                query: {
                    val
                }
            });
        },
        // 通过
        adopt(){
            order2adopt(this.pages.oId).then((res)=>{
                this.dialogVisibles= false,
        this.Rean();

                console.log(res);
            })
        },
        // 拒绝
        refuse(){
            this.Fail.status = 2;
            order2refuse(this.Fail).then((res)=>{
                this.dialogVisibles= false,
                this.Rean();
                console.log(res);
            })
        },
        // 入库修改
        quantity(val){
            console.log(val);
            this.sl.infoId=val
            this.dialogVisibleu=true
        },
        // 
        Submit(){
            order2quantity(this.sl).then((res)=>{
            this.dialogVisibleu=false
                this.Reans()
                console.log(res);
            })
        },
        datas(row){
            for(let i=0;i<this.options.length;i++){
                    if(this.options[i].method==row.method){
                        return this.options[i].label
                    }
            }
        },
        datasa(row){
            for(let i=0;i<this.ck.length;i++){
                if(this.ck[i].wId==row.wId){
                    return this.ck[i].name
                }
            }
        },
        // 打印
        print(val){
            this.Print=true
              setTimeout(() => {
JsBarcode("#barcode",val.orderId)
}, 0)
        },
         // 管理费用项
        Administrative(val){
            expenseitem(val).then((ref)=>{
                // console.log(ref.data.cost);
                this.grdData = ref.data
                if(this.grdData.cost == '')
                {
                    this.gridData = [
                    {
                        name:'托运费',
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        name:'停车费',
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                       name:'地面服务费',
                        mnumber: '0',
                        hnumber: '0'
                    }
                ]
                }else{
this.gridData = JSON.parse(this.grdData.cost)
                }
                this.costman = true
            })
        },
        // 修改管理费用
        management(){
        this.grdData.cost = JSON.stringify(this.gridData)
        // console.log(this.grdData);
        this.costman = false
        Modifyorder(this.grdData).then((ref)=>{
            console.log(ref);
            this.Rean()
            this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
        })
        },
    },
    mounted() {
        this.Rean();
        this.rean();
    }
};
</script>

<style scoped>
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    float: left;
}
.But button {
    margin-top: 10px;
}
/deep/.dialog-footer {
    display: flex;
     justify-content: flex-end;
}
#printMe{
    text-align:center;
}
</style>